<template>
	<view class="qilin-project" :style="navCustomStyle()">
		<Qilin-Nav bgColor="qilin-bg-gradual-blue">
			<template v-slot:title>
				推荐项目
			</template>
		</Qilin-Nav>
		<view class="qilin-project-conatiner qilin-pb-1">
			<view class="qilin-project-conatiner-item qilin-mb-5">
				<view class="qilin-project-conatiner-item-header flex-row">
					<image src="https://wx2.sinaimg.cn/bmiddle/006aaKeggy1hwq7dcwf77j30ht0b60wg.jpg"></image>
					<view class="text">
						<view class="text-title">mvi-web-plus移动端UI库</view>
						<view class="text-info">开源项目-源码，不包含部署上线</view>
					</view>
				</view>
				<view class="qilin-project-conatiner-item-content">
					<view class="description">一款基于vue3全面适配于移动端的UI组件库，直接下载安装即可使用。</view>
					<view class="album" style="width:100%;">
						<uv-album 
							:urls="urls1" 
							multipleSize="100"
							multipleMode="scaleToFill"
						></uv-album>
					</view>
				</view>
				<view class="qilin-project-container-item-footer flex-row">
					<view class="intro">
						<view class="intro-title qilin-bg-gradual-blue qilin-py-1 qilin-px-4 inline-block">项目类型</view>
						<view class="intro-text qilin-border-default qilin-px-4 inline-block">UI/JS开发</view>
					</view>
					<button class="qilin-bg-gradual-blue qilin-radius-elliptic" open-type="contact">了解咨询</button>
				</view>
			</view>
			<view class="qilin-project-conatiner-item qilin-mb-5">
				<view class="qilin-project-conatiner-item-header flex-row">
					<image src="https://wx2.sinaimg.cn/bmiddle/006aaKeggy1hwq7dcwf77j30ht0b60wg.jpg"></image>
					<view class="text">
						<view class="text-title">Qilin全栈管理系统</view>
						<view class="text-info">开源项目-源码，不包含部署上线</view>
					</view>
				</view>
				<view class="qilin-project-conatiner-item-content">
					<view class="description">一款基于vue3开发的后台管理项目，其内包含js工具库、二次源组件封装库、项目封装组件库等等一些真实项目案例，代码全部可见可粘贴。</view>
					<view class="album" style="width:100%;">
						<uv-album 
							:urls="urls2" 
							multipleSize="100"
							multipleMode="scaleToFill"
							:rowCount="2"
						></uv-album>
					</view>
				</view>
				<view class="qilin-project-container-item-footer flex-row">
					<view class="intro">
						<view class="intro-title qilin-bg-gradual-blue qilin-py-1 qilin-px-4 inline-block">项目类型</view>
						<view class="intro-text qilin-border-default qilin-px-4 inline-block">Vue/JS开发</view>
					</view>
					<button class="qilin-bg-gradual-blue qilin-radius-elliptic" open-type="contact">了解咨询</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref,reactive} from "vue";
import {navCustomStyle} from "@/utils/index.js";


/*
    响应式选项区域
*/


/*
    数据变量定义区域
*/
let albumWidth = ref(0);
const urls1 = reactive(
	[
		"https://wx2.sinaimg.cn/bmiddle/008aBNp0gy1hswgb2blplj31gv0p84d5.jpg",
		"https://wx4.sinaimg.cn/bmiddle/008aBNp0gy1hswgcslb44j31h20oddpf.jpg",
		"https://wx4.sinaimg.cn/bmiddle/008aBNp0gy1hswge8c14ij31gx0oaqed.jpg",
		"https://wx2.sinaimg.cn/bmiddle/008aBNp0gy1hswgev5hvij31gr0o9n8i.jpg",
		"https://wx3.sinaimg.cn/bmiddle/008aBNp0gy1hswgfewhmlj31gl0o2ti5.jpg",
		"https://wx4.sinaimg.cn/bmiddle/008aBNp0gy1hswgfxj88ij31gk0o3ql0.jpg",
		"https://wx4.sinaimg.cn/bmiddle/008aBNp0gy1hswgg5trhjj31gl0o247j.jpg",
		"https://wx1.sinaimg.cn/bmiddle/008aBNp0gy1hswggqriroj31gi0o3k24.jpg",
		"https://wx2.sinaimg.cn/bmiddle/008aBNp0gy1hswgh8qkwej31gk0o614p.jpg",
		"https://wx2.sinaimg.cn/bmiddle/008aBNp0gy1hswgi4idc2j31gv0o27fn.jpg",
	]
);
const urls2 = reactive([
	"https://wx4.sinaimg.cn/bmiddle/008aBNp0gy1htbil9mw15j31gh0p4wuf.jpg",
	"https://wx2.sinaimg.cn/bmiddle/008aBNp0gy1htbim9oed2j31gj0p84b5.jpg",
	"https://wx4.sinaimg.cn/bmiddle/008aBNp0gy1htbimiv2c6j31g70oo13j.jpg",
	"https://wx3.sinaimg.cn/bmiddle/008aBNp0gy1htbims7es9j31gb0oudp0.jpg"
]);


/*
    计算属性等代码区域
*/


/*
    逻辑脚本代码区域
*/


/*
    生命周期等代码区域
*/


</script>

<style lang="scss" scoped>
.qilin-project{
	width:100%;
	height:100%;
	>.qilin-project-conatiner{
		>.qilin-project-conatiner-item{
			background-color:#fff;
			>.qilin-project-conatiner-item-header{
				padding:30upx;
				align-items:center;
				border-bottom:1upx solid var(--qilin-border-color);
				>image{
					width:80upx;
					height:80upx;
					border-radius:$border-radius-circle;
				}
				>.text{
					margin-left:15upx;
					>.text-title{
						font-weight:bolder;
					}
					>.text-info{
						font-size:24upx;
						color:var(--qilin-color-info);
						margin-top:10upx;
					}
				}
			}
			>.qilin-project-conatiner-item-content{
				padding:30upx;
				>.description{
					font-size:26upx;
					line-height:40upx;
					letter-spacing:3upx;
					margin-bottom:20upx;
				}
				>.album{
					:deep(.uv-album__row){
						justify-content:center;
					}
				}
			}
			>.qilin-project-container-item-footer{
				padding:30upx;
				align-items:center;
				justify-content:space-between;
				>.intro{
					>.intro-title{
						border-radius:10upx 0 0 10upx;
					}
					>.intro-text{
						border-radius:0 10upx 10upx 0;
						padding:3upx 0;
					}
				}
				>button{
					font-size:24upx;
					margin:0;
					line-height:100%;
					padding:8upx 20upx;
				}
			}
		}
	}
}
</style>
